import React from 'react';
import { Button } from 'antd';
import { useSelector, useDispatch } from 'react-redux';

export default function ReduxDispatch() {
  /* useSelector(state) 直接订阅 redux 中的 store */
  const stores = useSelector(state => {
    // console.log('useSelector 中的 store', state);
    return {
      nameSpace: state.nameSpace,
      count: state.count
    };
  });
  const dispatch = useDispatch();

  // console.log( stores, 'stores' );
  return (
    <div>
      <h3>直接使用 react-redux 中的 useDispatch</h3>
      <pre>
        redux count:
        {stores.nameSpace} ---
        {stores.count}
        <Button
          onClick={() => {
            dispatch({
              type: 'DECREASE',
              count: 5
            });
          }}
        >
          直接使用 +5
        </Button>
      </pre>
    </div>
  );
}
